

.el-menu--popup{
  .el-menu-item{
    background-color: #20222a;
    i{
      margin-right: 5px;
    }
    i,span{
      color:hsla(0,0%,100%,.7);
    }
    &:hover{
      i,span{
        color:#fff;
      }
    }
    &.is-active {
      background-color: rgba(0,0,0,.8);
      &:before {
        content: '';
        top: 0;
        left: 0;
        bottom: 0;
        width: 4px;
        background: #409eff;
        position: absolute;
      }
      i,span{
        color:#fff;
      }
    }
  }

}
.avue-sidebar {
  user-select: none;
  position: relative;
  padding-top: 10px;
  height: 100%;
  position: relative;
  background-color: #191919;
  transition: width .2s;
  box-sizing: border-box;
  box-shadow: 2px 0 6px rgba(0,21,41,.35);
  &--tip{
    width:90%;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    position: absolute;
    top:5px;
    left:5%;
    color:#fff;
    z-index: 2;
    text-align: center;
    font-size: 14px;
    background-color: rgba(0,0,0,.4);
  }
  .el-menu-item,.el-submenu__title{

    i{
      margin-right: 5px;

    }
    i,span{
      color:hsla(0,0%,100%,.7);

    }
    &:hover{
      background: transparent;
      background-color: #151414;
      i,span{
        color:#fff;
      }
    }
    &.is-active {
      background: #3F95FF;
      &:before {
        content: '';
        top: 0;
        left: 0;
        bottom: 0;
        width: 4px;
        position: absolute;

      }

      i,span{
        color:#FFFFFF;
      }
    }
    &.is-active-1 {
      background: #3F95FF;
      &:before {
        content: '';
        top: 0;
        left: 0;
        bottom: 0;
        width: 4px;

        position: absolute;


      }

      i,span{
        color:#FFFFFF;
      }
    }
  }
}
